<template>
  <div class="card" style="margin-bottom: 10px;">
    <div class="cardbody">
      <div class="row">
        <div class=" shop col">My收藏</div>
      </div>
    </div>
  </div>


  <div style="margin-top: 30px;width: 1203px;margin-left: 95px;" class="card">
    <div class="cardbody">
      <div class="fl" v-for="sp in $store.state.favorites" :key="sp.id">
        <div class="tupian" style="width:300px;">
          <a><img style="width:270px;height:300px;" :src="sp.photo"></a>
          <div class="shadow">{{ sp.description }}</div>

          <div class="card">
            <div class="body shadow">
              <div style="color:red">价格：￥{{ sp.price }}
              </div>
            </div>
          </div>

          <div class="card">
            <div class=" body shadow">
              <div>商品名：{{ sp.productname }}
              </div>
            </div>
          </div>

          <div class="card">
            <div class="body shadow">
              <div>库存：{{ sp.inventory }}</div>
            </div>
          </div>


          <button @click="deletefavorite(sp.id)" class="btn btn-primary">取消收藏</button>

        </div>
      </div>

    </div>
  </div>
</template>
    
<script>
import { useStore } from 'vuex';
import $ from 'jquery';
// import router from '@/router/index';
export default {
  components: {
  },

  setup() {
    const store = useStore();
    const deletefavorite = (productid) => {
      store.commit("deletefavorite", productid);
      $.ajax({
        url: "http://8.134.248.229:10085/favorite/delete/",
        type: "post",
        headers: { Authorization: "Bearer " + store.state.token, },
        data: {
          productid: productid,
          userid: store.state.id,
        },
        success(resp) {
          console.log(resp);
        }
      })
      // console.log("123");
    };

    //  const gotodetails=(productid)=>{
    //          router.push({name:'product_details',params:{id:productid}});
    //    };
    return { deletefavorite };
  }
};
</script>
    
<style scoped>
.col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.show {
  display: flex;
}

.fl {
  float: left;
}

.tupian:hover {
  transform: scale(1.05);
}

.shadow {
  font-weight: lighter;
  text-align: center;
}

button {
  width: 100%;
}

.shop {
  background-color: lightgreen;
  font-size: large;
  font-weight: bolder;
}</style>